<template>
    <div class="chat-page">
        <!-- 导航栏 -->
        <van-nav-bar title="客服" left-arrow @click-left="onClickLeft" />
        <!-- 消息列表 -->
         <div class="chat-list">
             <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                 <van-cell v-for="item in list" :key="item">
                    <span v-if="item%2 == 0" style="color: red;">{{ item }}</span>
                    <span v-else style="color: black;">{{ item }}</span>
                 </van-cell>
             </van-list>
         </div>
        <!-- 底部输入框 -->
        <van-cell-group inset>
            <van-field v-model="value" label-align="left" :border='false' type="textarea" placeholder="请输入您的问题">
                <template #button>
                    <van-button size="small" type="primary">发送信息</van-button>
                </template>
            </van-field>
        </van-cell-group>
    </div>
</template>

<script setup>

const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const onClickLeft = () => history.back();
// 输入框内容
const value = ref('');

let data = {
    key: "free",
    appid: 0,
    msg: value.value,
}

const onLoad = () => {
    setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          list.value.push(list.value.length + 1);
        }

        // 加载状态结束
        loading.value = false;

        // 数据全部加载完成
        if (list.value.length >= 40) {
          finished.value = true;
        }
      }, 1000);
}

</script>

<style>
/* 让聊天页面占满整个视口 */
.chat-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: gray;
}

/* 聊天内容区域（让其可以滚动） */
.chat-list {
    flex: 1;
    /* 占据除输入框外的剩余空间 */
    overflow-y: auto;
    padding-left: 18px;
}

.chat-list .van-list {
    width: auto;
}

.chat-list .van-cell {
    margin: 10px 0px;
    width: auto;

    border-radius: 10px;
}

.chat-list .van-cell .van-cell__value {
    width: auto;
}
</style>